<template>
  <div class="wrapper">

    <!-- header部分 -->
    <header>
      <p>头像管理</p>
    </header>

    <div class="userinfo">
      <img v-bind:src="imgSrc" class="userinfo-img" id="userDefaultImgBox">
      <!-- <ul id="userAlternateImgArrBox">
  					<li><img src=""></li>
  					<li><img src=""></li>
  					<li><img src=""></li>
  					<li><img src=""></li>
  					<li><img src=""></li>
  					<li><img src=""></li>
  					<li><img src=""></li>
  					<li><img src=""></li>
  					<li><img src=""></li>
  				</ul> -->
      <div>
        <input type="file" ref="myfile" v-on:change="changeImg()">
      </div>
      <button v-on:click="saveImg()">保存修改</button>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue'
export default {
  name: 'userImg',
  data: function () {
    return {
      imgSrc: ''
    }
  },
  methods: {
    changeImg: function () {
      let myfile = this.$refs.myfile;
      // console.log(myfile);
      let myimg = myfile.files[0];
      // console.log(myimg);
      // 原生JS读取文件的内置对象
      let reader = new FileReader();
      // 把文件路径提供给文件读取工具
      reader.readAsDataURL(myimg);
      reader.onload = e => {
        let data = e.target.result;
        // console.log(data);
        this.imgSrc = data;
      }
    },
    // 保存头像
    saveImg: function () {
      let url = 'UserController/updateUserImg';
      let that = this;
      this.$axios.post(url,this.$qs.stringify({
          userId: that.$sessionGet().userId,
          userImg: that.imgSrc
      }))
        .then(resp=>{
          let result = resp.data;
          if(result > 0){
            alert("头像更改成功");
          }else{
            alert('更改失败');
          }
        })
        .catch(err=>{
          console.log(err);
        })

    },
    // 获取用户头像信息
    getUserById: function (userId) {
      let that = this;
      let url = 'UserController/getUserById';
      this.$axios.post(url, this.$qs.stringify({ userId }))
        .then(resp => {
          let user = resp.data;
          that.imgSrc = user.userImg;
        })
        .catch(err => {
          console.log(err);
        })
    }
  },
  components: {
    Footer: Footer
  },
  created: function () {
    let user = this.$sessionGet();
    if (user != null) {
      this.getUserById(user.userId);
    }
  }
}
</script>

<style scoped="scoped">
/*************** 总容器 ***************/
.wrapper {
  width: 100%;
  height: 100%;
}

/*************** header ***************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  /*保证在最上层*/
  z-index: 1000;
}

/*************** userimg ***************/
.wrapper .userinfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;
  padding: 4vw;

  margin-top: 12vw;
  margin-bottom: 14vw;
}

.wrapper .userinfo .userinfo-img {
  display: block;
  width: 30vw;
  height: 30vw;
  border-radius: 15vw;
  margin-bottom: 8vw;
}

.wrapper .userinfo ul {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.wrapper .userinfo ul li {
  width: 16vw;
  height: 16vw;
  margin: 0 0 4vw 6vw;
}

.wrapper .userinfo ul li img {
  display: block;
  width: 16vw;
  height: 16vw;
  border-radius: 8vw;
  cursor: pointer;
}

.wrapper .userinfo button {
  margin-top: 1vw;
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;

  border: none;
  outline: none;
  border-radius: 4px;

  color: #fff;
  background-color: #38CA73;
}
</style>
